<style>
#tbl_key tr td div{
	padding: 10px;
	font-size: 36px;
	border: 1px solid gray;
	width: 86px;
	background-image: url('<?php echo $this->base; ?>/public/images/bg_bt.png');
	background-repeat: repeat-x;
	background-color: #e5e5e5;
	margin: 2px;
}

#tbl_key tr td div:active{
	background-color: #E0FFAF;
}
</style>

<script>

var json = 0;

function trim(str)
{
	return str.replace(/^\s+|\s+$/g,"");
}

function apagarKey()
{
	var htm = $("#text_coment").val();
	var nhtm = htm.substr($("#text_coment").val(), ($("#text_coment").val().length - 1), 0);

	//if()

	$("#text_coment").val(nhtm);
}

function resetPassword()
{
	$("#nameUser").css('background-color', "red").html("User ID");
	$("#userNumberTxt").removeAttr("disabled");
	$("#btn_login").removeAttr("disabled");
	$("#btn_reset").removeAttr("disabled");
}

function showKeyboard()
{
	$("#sample_txt").show();
	$("#div_key").animate({"bottom": 0, "opacity": 1}, 500, function(){});
}

function getPasssss()
{
	$.getJSON('<?php echo $this->base; ?>/pedido/jsonpass', {pass: $("#userNumberTxt").val()}, function(json)
	{
		auxJson = json;

		user = json;

		$("#userNumberTxt").val("");
		
		if(!auxJson.caf01_cod)
		{
			$("#nameUser").css("background-color", "#FF3300").html("User ID");
			$("#table").attr("disabled", "disabled").val(0);
			$("#addIten").attr("disabled", "disabled");
			$("#group").attr("disabled", "disabled").val(0);
			
			msg({vmsg: "Usuario nao encontrado.",time: 3000 ,type: "alert"});

			$("#userNumberTxt").focus();

			logoff();
			
			return false;
		}

		$("#nameUser").css('background-color', "#009900").html(json.caf01_user);
		$("#userNumberTxt").attr("disabled", "disabled");
		$("#btn_login").attr("disabled", "disabled");
		$("#btn_reset").attr("disabled", "disabled");

		<?php echo $this->jsfunc; ?>;

		return true;
	});
}
</script>

<div id="div_key" style="width: 100%; position: fixed; bottom: 0; left: 0; z-index: 995; display: block; height: 290px; bottom: -290px; opacity: 0;">
	<div style="opacity: 0.6; position: absolute; height: 100%; width: 100%; background-color: gray; z-index: 996;  border-top: 1px solid black; ">
	
	</div>
	<div onclick='$("#div_key").animate({"bottom": -290, "opacity": 0}, 500, function(){}); $("#sample_txt").hide();' style="padding: 10px; right: 0; margin-top: -4px; margin-right: -4px; text-align: right; position: absolute; z-index: 1000;">
		<img src="<?php echo $this->base; ?>/public/images/actions/sim.png" />
	</div>
	<div id="sample_txt" class="ui-corner-top" style="background-color: white; display: none; height: 18px; left: 50%; border: 1px solid #7A7A7A; margin-left: -300px; margin-top: -19px; z-index: 999; position: fixed; width: 600px; text-align: center;">
	</div>
	<table border="0" align="center" id="tbl_key" cellpadding="0" cellspacing="0" style="z-index: 999; position: relative; margin-top: 10px; text-align: center; font-size: 40px;">
		<tr>
			<td>
				<div>
					Q
				</div>
			</td>
			<td>
				<div>
					W
				</div>
			</td>
			<td>
				<div>
					E
				</div>
			</td>
			<td>
				<div>
					R
				</div>
			</td>
			<td>
				<div>
					T
				</div>
			</td>
			<td>
				<div>
					Y
				</div>
			</td>
			<td>
				<div>
					U
				</div>
			</td>
			<td>
				<div>
					I
				</div>
			</td>
			<td>
				<div>
					O
				</div>
			</td>
			<td>
				<div>
					P
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div>
					A
				</div>
			</td>
			<td>
				<div>
					S
				</div>
			</td>
			<td>
				<div>
					D
				</div>
			</td>
			<td>
				<div>
					F
				</div>
			</td>
			<td>
				<div>
					G
				</div>
			</td>
			<td>
				<div>
					H
				</div>
			</td>
			<td>
				<div>
					J
				</div>
			</td>
			<td>
				<div>
					K
				</div>
			</td>
			<td>
				<div>
					L
				</div>
			</td>
			<td>
				<div>
					;
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div>
					Z
				</div>
			</td>
			<td>
				<div>
					X
				</div>
			</td>
			<td>
				<div>
					C
				</div>
			</td>
			<td>
				<div>
					V
				</div>
			</td>
			<td>
				<div>
					B
				</div>
			</td>
			<td>
				<div>
					N
				</div>
			</td>
			<td>
				<div>
					M
				</div>
			</td>
			<td>
				<div>
					,
				</div>
			</td>
			<td>
				<div>
					.
				</div>
			</td>
			<td>
				<div>
					/
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="8" align="left">
			 	<div style="text-align: center; width: 870px;">
					Space
				</div>
			</td>
			<td colspan="2">
			 	<div style="width: 200px;" onclick="apagarKey();">
					Backspace
				</div>
			</td>
		</tr>
	</table>
	<div style="height: 10px;"></div>
</div>


<script>

$("#tbl_key tr td div").addClass("button").click(function(){
	
		var htm = trim($(this).html());
		
		if(htm == "Space")
		{
			htm = " ";
		}
		if(htm == "Backspace")
		{
			htm = "";
		}
		
		$("#text_coment").val($("#text_coment").val() + htm);
		$("#sample_txt").html($("#text_coment").val());

});

$("#userNumberTxt").keyup(function()
{
	if($("#userNumberTxt").val().length == 3)
	{
		//getPass();
	}
});

</script>